<template>
<q-page :padding="!$q.platform.is.mobile">
    <q-inner-loading visible v-if="loading">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading>

    <!-- header -->
    <q-toolbar color="primary">
      <q-toolbar-title shrink>
        <q-select inverted hide-underline v-model="days" :options="dayOptions" @input="dayChange" />
      </q-toolbar-title>
      <q-toolbar-title>
          
      </q-toolbar-title>
      <q-toolbar-title shrink>
        <span slot="subtitle">
          <q-btn dense label="下载影评" icon="mdi-download" color="primary"  
            @click="downloadReview()" :loading="downloading"></q-btn>
        </span>
      </q-toolbar-title>
      <q-toolbar-title shrink>
        <span slot="subtitle" class="text-right">
          <div><b>{{slicedList.length}}</b>篇</div>
          <div>当前筛选</div>
        </span>
      </q-toolbar-title>
    </q-toolbar>

    <!-- search-bar -->
    <q-list dense class="search-bar" no-border>
            <q-item>
                <q-radio keep-color v-model="category" val="all"   label="全部类型"   color="primary" />
                <q-radio keep-color v-model="category" val="movie" label="电影"     color="primary" />
                <q-radio keep-color v-model="category" val="tv"     label="连续剧"   color="primary" />
                <q-radio keep-color v-model="category" val="zy_tv" label="综艺"     color="primary" />
            </q-item>
            <q-item>
                <q-radio keep-color v-model="sort" val="fans"   label="按粉丝量排序"   color="primary" @input="loadReviews()" />
                <q-radio keep-color v-model="sort" val="hot"    label="按影评热度排序"     color="primary" @input="loadReviews()" />
            </q-item>            
            <q-search no-icon class="full-width no-shadow" v-model="filter" 
                    inverted-light color="grey-2"
                    placeholder="关键词过滤" autofocus="true" clearable 
                    @click="stopClick($event)" />
        </q-list>

    <q-list v-if="slicedList.length == 0" :no-border="$q.platform.is.mobile" :style="$q.platform.is.desktop?'padding:8px;':''">
        <q-item class="text-primary">暂无符合条件的数据</q-item>
    </q-list>

    <q-list v-scroll="scrolled" separator :no-border="$q.platform.is.mobile" :style="$q.platform.is.desktop?'padding:8px;':''">
        <q-collapsible v-for="item in slicedList" :key="'review'+item.reviewId" :class="authroColor(item)">
          <template slot="header">
            <q-item-main>
              <q-item-tile label>
                  <a :href="'https://movie.douban.com/review/'+item.reviewId+'/'" target="_blank">{{item.title.substring(0, 10)}}</a>
              </q-item-tile>
              <q-item-tile sublabel>
                    <q-chip dense square color="primary" v-if="item.category == 'movie'">影</q-chip>
                    <q-chip dense square color="teal" v-if="item.category == 'tv'">剧</q-chip>
                    <q-chip dense square color="blue" v-if="item.category == 'zy_tv'">综</q-chip>
                  {{item.movieName.substring(0,5)}}
                  <small>（影评热度：<b class="text-primary">{{item.reply+item.useful-item.useless}}</b>）</small>   
              </q-item-tile>
              <q-item-tile sublabel>
                  <small>作者：</small>
                  <a :href="'https://www.douban.com/people/'+item.userId+'/'" target="_blank">{{item.userName}}</a>                                                   
              </q-item-tile>
              <q-item-tile sublabel>
                  <small>
                        <q-chip dense color="primary">{{item.followers}}粉</q-chip>
                           &nbsp;&nbsp;<b>{{item.reviewCount}}</b>影评 
                           &nbsp;&nbsp;<b>{{item.ratingCount}}</b>短评</small>  
              </q-item-tile>
            </q-item-main>
            <q-item-side right>
              <q-chip dense square color="primary" v-if="item.status == 0">正式作者</q-chip>
              <q-chip dense square color="black" v-if="item.status == -1">已拉黑</q-chip>
              <q-chip dense square color="blue" v-if="item.status == 1">等回应</q-chip>
              <q-chip dense square color="blue" v-if="item.status == 2">待联系</q-chip>
            </q-item-side>
            <!-- action list -->
            <q-item-side right>
              <q-btn-dropdown dense outline label="操作" @click="stopClick($event)" >
                <!-- 下拉内容 -->
                <q-list separator class="q-pa-none" style="min-width:120px;">
                    <q-item class="q-pa-none" v-if="isAuthor && item.status==-100">
                        <q-btn class="full-width text-primary" dense flat v-close-overlay
                            label="新增待联系" @click="saveAuthor(item, 2)" />
                    </q-item>
                    <q-item class="q-pa-none" v-if="isAuthor && item.status==2">
                        <q-btn class="full-width text-primary" dense flat v-close-overlay
                            label="作者已联系" @click="saveAuthor(item, 1)" />
                    </q-item>
                    <q-item class="q-pa-none" v-if="isAuthor && item.status==1">
                        <q-btn class="full-width text-primary" dense flat v-close-overlay
                            label="新增作者" @click="saveAuthor(item, 0)" />
                    </q-item>
                    <q-item class="q-pa-none" v-if="isAuthor && item.status != -1">
                        <q-btn class="full-width text-primary" dense flat v-close-overlay
                            label="不合适"  @click="saveAuthor(item, -1)"   />
                    </q-item>
                    <q-item class="q-pa-none" v-if="item.status==2">
                        <q-btn class="full-width text-primary" dense flat v-close-overlay>
                            <a class="text-primary" :href="'https://www.douban.com/doumail/write?to='+item.userId" target="_blank">豆油联系</a> 
                        </q-btn>
                    </q-item>
                </q-list>
                </q-btn-dropdown>
            </q-item-side>
          </template>
          <div>
              <div class="text-primary">{{item.title}}</div>
              <div class="q-my-sm">
                <small>评分：</small> <q-rating v-if="item.rating>0" v-model="item.rating" readonly :max="parseInt(item.rating)" color="primary" /> 
                <small>
                    &nbsp;&nbsp;&nbsp;&nbsp;评论：{{item.reply}} 
                    &nbsp;&nbsp;&nbsp;&nbsp;点赞：{{item.useful}} 
                    &nbsp;&nbsp;&nbsp;&nbsp;没用：{{item.useless}}
                </small>
              </div>
              <div>
                <label>{{item.content}}</label> 
                <small><a :href="'https://movie.douban.com/review/'+item.reviewId+'/'" target="_blank">(查看全文)</a></small>               
              </div>
          </div>
        </q-collapsible>
    </q-list>

</q-page>
</template>

<style>
div.search-bar span.q-option-label {
    margin-left: 0px !important;
    margin-right: 10px;
}

div.search-bar {
    background-color: #fff;
    padding-bottom:0;
}

div.search-bar .q-collapsible-sub-item {
    padding: 0;
}

div.q-item a {
    text-decoration: none;
}

.q-item-side + .relative-position {
    margin-left: 0;
    min-width: 20px;
}
 
</style>

<script>

export default {
  name: 'PageIndexReview',
  data () {
    return {
        isAuthor: true,
        filter: '',
        category: 'all',
        sort: 'fans',
        currentIndex: 20,
        downloading: false,
        loading: false,
        list: [],
        days: '30',
        dayOptions: [
            { label: '3日榜', value: '3' },
            { label: '7日榜', value: '7' },
            { label: '15日榜', value: '15' },
            { label: '30日榜', value: '30' },
            { label: '60日榜', value: '60' }
        ]
    }
  },
  mounted() {
    this.$api.ui.pageTitle = '优质影评';
    this.loadReviews();
  },
  methods: {
      scrolled: function() {
          this.currentIndex += 5;
      },
      stopClick: function(e) {
          e.stopPropagation();
      },
      dayChange: function(v) {
          this.days = v;
          this.loadReviews();
      },
      downloadReview: function() {
          let me = this;
          me.downloading = true;          
          me.$api.review.downloadReviews(me.days, function(){
              me.downloading = false;
          });
      },
      loadReviews: function(e) {  
          if(e) e.stopPropagation();               
          let me = this;
          me.loading = true;
          me.$api.review.loadReviews(me.days, me.sort, res=>{
              me.currentIndex = 20;
              me.list = res.data.model;
              me.loading = false;
              if(me.list.length == 0) {
                me.$q.notify({ message: '没有符合条件的影评', type: 'warning' });
              }
          }, error=>{
              me.loading = false;
          });
      }, 
      saveAuthor: function(item, status) {
          let me = this;
          let cats = 1;
          if(item.category == "tv") {
              cats = 2;
          } else if(item.category == "zy_tv") {
              cats = 4;
          }
            me.$api.author.saveAuthor({
                "userId":item.userId,
                "userName":item.userName,
                "followerCount": item.followers,
                "cats": cats,
                "status":status,
                "note": (status == -1 ? "不合适作者" : "")
            }, ret => {
                item.status = status;
            }, error =>{
                
            });
      },
      authroColor(item) {
          const prefix = 'bg-'
          if(item.followers >= 1000) {
              return `${prefix}deep-orange-1`;
          } else if(item.followers <= 500) {
              return `${prefix}grey-2`;
          } else {
              return `${prefix}orange-1`;
          }
      }
  }, 
  computed: {
      slicedList() {
          let category = this.category;
          let query = this.filter.toLowerCase();
        let filteredList = this.list.filter(function (item) {
            

            if(category != 'all' 
                && category != item.category) {
                return false;
            }

            if(query.length>0) {
                let text = item.movieName + item.userName + item.title + item.content + item.category;
                if(item.category == 'movie') {
                    text += '电影';
                }else if(item.category == 'tv') {
                    text += '电视剧连续剧';
                }else if(item.category == 'zy_tv') {
                    text += '综艺';
                }
                if(text.indexOf(query)>=0) {
                    return true;
                }       
                return false;
            }
            return true;
        });

          if(filteredList.length < this.currentIndex) {
              return filteredList;
          } else {
              return filteredList.slice(0, this.currentIndex);
          }
      }
  }
}
</script>

<style>
.border-deep-orange-1{
    border-left: 5px #ffab91 solid;
}
</style>

